<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    Attribultes
      Vue3:
        在组件上传递的属性，除了被 props 选项与 emits 选项声明过的除外，其他的属性都叫做 Attribulte

      Vue2:
        在组件上传递的属性，除了被 props 选项声明过的除外，其他属性都叫做 Attribulte

      这些 attribulte 在组件内的实例对象上有一个 $attrs 属性来收集。

      Vue3: 
        组件上绑定的事件，如果没有在组件中通过 emits 声明的话，则该事件也会被当成一个 attr, 在 $attrs 中被收集。
      Vue2:
        组件上绑定的事件，不会被当成 attr ，也不会被收集到 $attrs 中。而是将他们收集到一个 $listeners 实例属性中。

      Attr数据的特点：
        1. 会自动继承到组件的根元素上。
            1. 如果组件根元素原本就有同名的属性，是覆盖的操作。
                clss 与 style 是两个老六attr。他们是走合并操作，而非覆盖

            2. 可以在组件内通过设置 inheritAttrs: false 选项来禁用 attr 数据的继承

        2. 如果组件有多个根元素的话，默认不会自动继承，且会报错。
   -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            name: "张三",
          };
        },

        template: `
          <person 
            :username="name" 
            a="a" 
            b="b"
            c="c"
            class="box2"
            style="font-size: 50px"
            @click="name = '里斯'"
            />
        `,
      });

      app.component("person", {
        // inheritAttrs: false, // 禁用 attr 的继承

        template: `
          <div a="aa" class="box1" style="color: red;">
            <p>姓名：{{ username }}</p>
          </div>

          <div>
            <p>年龄： 未知</p>  
          </div>
        `,
        props: ["username"],
        emits: ["click"],
        created() {
          console.log("$props", this.$props);
          console.log("$attrs", this.$attrs);
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
